<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<%@ include file="/WEB-INF/views/layout/public_css.jsp"%>
<%@ include file="/WEB-INF/views/layout/public_js.jsp"%>
<style type="text/css">
.details-item {
	width:100%;
	height:100%;
	padding:5px 10px ;
	position: absolute;
    background-color:#fff;
}
</style>
<script>
$(document).ready(function() {
    $('#cppl_table').DataTable({
    	"pagingType":   "full_numbers",
    	"iDisplayLength":5 ,
    	"oLanguage" : {
			"sProcessing" : "处理中...",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页"
			}
		},
    });
    $('#plcp_table').DataTable({
    	"pagingType":   "full_numbers",
    	"iDisplayLength":5 ,
    	"oLanguage" : {
			"sProcessing" : "处理中...",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页"
			}
		},
    });
    

    
    $('#cjgg_table').DataTable({
    	"pagingType":   "full_numbers",
    	"iDisplayLength":3,
    	"oLanguage" : {
			"sProcessing" : "处理中...",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页"
			}
		},
    });
    
    $('#cjjl_table').DataTable({
    	"pagingType":   "full_numbers",
    	"iDisplayLength":1 ,
    	"oLanguage" : {
			"sProcessing" : "处理中...",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页"
			}
		},
    });
    
    
    $('#jjgg_table').DataTable({
    	"pagingType":   "full_numbers",
    	"iDisplayLength":6 ,
    	"oLanguage" : {
    		"sProcessing" : "处理中...",
    		"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    		"oPaginate" : {
    			"sFirst" : "首页",
    			"sPrevious" : "上页",
    			"sNext" : "下页",
    			"sLast" : "末页"
    		}
    	},
    });
    
    
    
});




</script>
</head>
<body>
<%@ include file="/WEB-INF/views/layout/head_ele.jsp"%>
<div class="container-fluid">
	<div class="row">
	  <div class="col-md-6"  style="padding: 0 25px">
	  	<div class="list-title">产品品类列表</div>
	  	<table id="cppl_table" class="table table-striped" cellspacing="0" width="100%">
	        <thead>
	            <tr>
	                <th>编号</th>
	                <th>产品品类名称</th>
	                <th>发布人</th>
	                <th>发布时间</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <td>No.12548</td>
	                <td>电子科技及其相关产品</td>
	                 <td>赵人皆</td>
	                <td>2017-04-13 09:01:05</td>
	            </tr>
	            <tr>
	                <td>No.25634</td>
	                <td>基础建设</td>
	                 <td>何攀峰</td>
	                <td>2017-04-13 04:22:05</td>
	            </tr> 
	            <tr>
	                <td>No.25465</td>
	                <td>金融项目相关</td>
	                 <td>姜大卫</td>
	                <td>2017-04-13 07:53:05</td>
	            </tr>
	            <tr>
	                <td>No.39146</td>
	                <td>政府办公</td>
	                 <td>任为</td>
	                <td>2017-04-13 03:17:05</td>
	            </tr> 
	        </tbody>
	    </table>
	  </div>
	  <div class="col-md-6" style="padding: 0 25px">
	  	<div class="list-title">产品列表</div>
	  	<table id="plcp_table" class="table table-striped" cellspacing="0" width="100%">
	        <thead>
	            <tr>
	                <th>编号</th>
	                <th>品类产品名称</th>
	                <th>发布人</th>
	                <th>发布时间</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <td>So.35761</td>
	                <td>Lenovo/联想 拯救者 R720-15IKB笔记本手提电脑15.6英寸</td>
	                <td>兰香薷</td>
	                <td>2017-04-12 09:34:05</td>
	            </tr>
	            <tr>
	                <td>So.36521</td>
	                <td>白雪直液式走珠笔学生用中性笔0.5黑色办公签字笔碳素水性笔</td>
	                <td>李琳琳</td>
	                <td>2017-04-16 22:54:05</td>
	            </tr> 
	            <tr>
	                <td>So.35786</td>
	                <td>佳能MG2580S打印机一体机 家用彩色喷墨照片打印复印扫描多功能 </td>
	                <td>任为</td>
	                <td>2017-04-17 08:23:05</td>
	            </tr>
	            <tr>
	                <td>So.13582</td>
	                <td>京天华盛S24E360HL 23.6英寸护眼高清液晶显示屏三星电脑显示器24</td>
	                <td>姜大卫</td>
	                <td>2017-04-13 07:53:05</td>
	            </tr> 
	      
	        </tbody>
	    </table>
	  </div>
	</div>
	<ul class="nav nav-tabs">
	  <li role="presentation" class="nav-item active" id="nav-item1"><a href="javascript:void(0)">竞价公告</a></li>
	  <li role="presentation"  class="nav-item" id="nav-item2"><a href="javascript:void(0)">成交公告</a></li>
	  <li role="presentation" class="nav-item" id="nav-item3"><a href="javascript:void(0)">最近成交记录</a></li>
	</ul>
	<div style="position:relative;height:500px;">
		<div class="details-item" id="details-item1">
			<table id="jjgg_table" class="table table-striped" cellspacing="0" width="100%">
		        <thead>
		            <tr>
		                <th>编号</th>
		                <th>竞价公告</th>
		                <th>起始金额</th>
		                <th>发布人</th>
	                	<th>发布时间</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr>
		                <td>Bo.65847</td>
		                <td>淄博市人民政府法制办公室行政执法监督网络系统之行政复议子系统管理平台采购竞争性磋商公告</th>
		                <td>10万</td>
		                <td>李琳琳</td>
	                	<td>2017-04-17 08:23:05</td>
		            </tr>
		          	<tr>
		                <td>Bo.65847</td>
		                <td>潍坊市防灾减灾中心防灾减灾教育培训竞争性磋商公告</td>
		                <td>10万</td>
		                <td>李学庆</td>
	                	<td>2017-04-13 15:27:47</td>
		            </tr>
		          	<tr>
		                <td>Bo.65847</td>
		                <td>淄博市图书馆尼山书院（含稷下书院）装修工程竞争性磋商公告</td>
		                <td>10万</td>
		                <td>潘粤明</td>
	                	<td>2017-04-13 14:28:50</td>
		            </tr>
		             <tr>
		                <td>Bo.65847</td>
		                <td>山东交通职业学院办公设备维修保养采购竞争性磋商公告</td>
		                <td>10万</td>
		                <td>于波</td>
	                	<td>2017-04-02 10:41:10</td>
		            </tr>
		          	<tr>
		                <td>Bo.65847</td>
		                <td>山东交通职业学院印刷服务采购竞争性磋商公告</td>
		                <td>10万</td>
		                <td>张杰</td>
	                	<td>2017-04-01 17:34:03</td>
		            </tr>
		            <tr>
		                <td>Bo.65847</td>
		                <td>滨州医学院中医执业医师分阶段考试实证研究—中医学建设项目竞争性磋商公告</td>
		                <td>10万</td>
		                <td>李茂</td>
	                	<td>2017-04-01 15:13:31</td>
		            </tr>
		        </tbody>
		    </table>
		</div>
    	<div class="details-item" id="details-item2">
		    <table id="cjgg_table" class="table table-striped" cellspacing="0" width="100%">
		        <thead>
		              <tr>
		                <th>编号</th>
		                <th width="100%">项目名称</th>
		                <th>成交金额</th>
		                <th>成交人</th>
		                <th>成交记录</th>
		            </tr>
		        </thead>
		        <tbody>
		         	<tr>
		                <td>Wo.25831</td>
		                <td>山东省旅游发展委员会机关2017孔子家乡·好客山东国际旅游摄影大赛服务项目竞争性磋商公告</td>
		                <td>3000万</td>
		                <td>陈自瑶</td>
	                	<td>2017-03-31 17:23:52</td>
		            </tr>
		            <tr>
		         		<td>Wo.37456</td>
		                <td>潍坊医学院仪器设备预约管理系统采购竞争性磋商公告</td>
		                <td>1853万</td>
		                <td>程媛媛</td>
	                <td>2017-03-31 09:21:01</td>
		            </tr>
		            <tr>
		              <td>Wo.96258</td>
		                <td>山东省旅游发展委员会机关2017好客山东旅游微视频大赛服务项目竞争性磋商公告</td>
		                <td>1亿4000万</td>
		                <td>阿桑</td>
	                	<td>2017-03-30 08:18:11</td>
		            </tr> 
		   
		        
		        </tbody>
		    </table>
    	</div>
    	<div class="details-item" id="details-item3">
    		<table id="cjjl_table" class="table table-striped" cellspacing="0" width="100%">
		        <thead>
		              <tr>
		                <th>编号</th>
		                <th width="100%">项目名称</th>
		                <th>成交金额</th>
		                <th>成交人</th>
		                <th>成交记录</th>
		            </tr>
		        </thead>
		        <tbody>
		     		<tr>
		                <td>Wo.25831</td>
		                <td>山东省旅游发展委员会机关2017孔子家乡·好客山东国际旅游摄影大赛服务项目竞争性磋商公告</td>
		                <td>3000万</td>
		                <td>陈自瑶</td>
	                	<td>2017-03-31 17:23:52</td>
		            </tr>
		        </tbody>
		    </table>
    	</div>
	</div>
</div>
<script type="text/javascript">
	doOnLoad();
	function doOnLoad()
	{
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item1").show();
	}


	$("#nav-item1").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item1").show();
	});
	$("#nav-item2").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item2").show();
	});
	$("#nav-item3").click(function(){
		$(".nav-item").removeClass("active");
		$(this).addClass("active");
		$(".details-item").hide();
		$("#details-item3").show();
	});
</script>
</body>
</html>